<template>
    <div class="main">
        <div class="top">
            <Header @toggleCollapse="ExpandOrFold" :isCollapse="isCollapse" :isMobile="isMobile"></Header>
        </div>
        <div class="bottom">
            <Menu class="left" 
            :style="{width: isMobile? (isCollapse ? '15%' : '45%') : (isCollapse ? '60px' : '12%')}"
            :isCollapse="isCollapse"></Menu>
            <div class="right">
                
                <div class="pages">
                    <router-view ></router-view>
                    
                </div>
                <div class="pagefooter">
                        © 2023-2024 Powered by aiot
                    </div>
            </div>
            
        </div>
        
        <Overlay v-if="(!isCollapse) && isMobile" :isShow="(!isCollapse) && isMobile" @click="isCollapse = true"></Overlay>
        
        
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Menu from '@/components/Menu/index.vue';
import Overlay from '@/components/Overlay/index.vue';
import Header from '@/components/Header/index.vue';

let isCollapse = ref(false);
let isMobile = ref(false);
onMounted(() => {
    
    console.log(process.env.NODE_ENV, process.env.VUE_APP_SERVER)
    if (_isMobile()) {
        isMobile.value = true;
    } else {
        isMobile.value = false;
    }
    console.log('isMobile:', isMobile.value);
//   alert('isMobile:' + isMobile.value);
});
const _isMobile = () => {
    // alert(navigator.userAgent)
    let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
    return flag;
}

const ExpandOrFold = () => {
    isCollapse.value = !isCollapse.value;
    // console.log('isCollapse:', isCollapse.value);
    // alert('isCollapse:' + isCollapse.value);
}
</script>

<style lang="less">

@media screen and (min-width: 1200px) {
    .main {
        width: 100%;
        height: 100%;
        background-color: #f2f3f5;
        display: flex;
        flex-direction: column ;
        // justify-content: space-between;
        .top{
            height: 5%;
            width: 100%;
        }
        .bottom{
            height: 95% ;
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            .left{
                height: 100%;
                transition: .5s;
                z-index: 9999;
            }
            .right{
                flex: 1;
                transition: .5s;
                height: 100%;
                background-color: #f2f3f5;
                .pages{
                    height: 95%;
                    width: 99%;
                    // background-color: #ffffff;
                    margin: 0.5% 0.3%;
                    border-radius: 1rem;
                }
                .pagefooter{
                    height: 3%;
                    width: 100%;
                    border-top: 1px solid #f2f3f5;
                    background-color: #ffffff;
                    text-align: center;
                    font-size: 14px;
                    color: #999999;
                    letter-spacing: .5px;
                }
            }
            
        }
        
    }
}

@media screen and (min-width: 922px) and (max-width:1199px) {
    .main {
        width: 100%;
        height: 100%;
        background-color: #f2f3f5;
        display: flex;
        flex-direction: column ;
        // justify-content: space-between;
        .top{
            height: 5%;
            width: 100%;
        }
        .bottom{
            height: 95% ;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .left{
                height: 100%;
                transition: .5s;
                z-index: 9999;
            }
            .right{
                flex: 1;
                transition: .5s;
                height: 100%;
                background-color: aquamarine;
            }
        }
        
    }
}

@media screen and (min-width: 768px) and (max-width:922px) {
    .main {
        width: 100%;
        height: 100%;
        background-color: #f2f3f5;
        display: flex;
        flex-direction: column ;
        // justify-content: space-between;
        .top{
            height: 5%;
            width: 100%;
        }
        .bottom{
            height: 95% ;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .left{
                height: 100%;
                transition: .5s;
                z-index: 9999;
            }
            .right{
                flex: 1;
                transition: .5s;
                height: 100%;
                background-color: aquamarine;
            }
        }
        
    }
}

@media screen and (max-width: 768px) {
    .main {
        width: 100%;
        height: 100%;
        background-color: #f2f3f5;
        display: flex;
        flex-direction: column ;
        // justify-content: space-between;
        .top{
            height: 5%;
            width: 100%;
        }
        .bottom{
            height: 95% ;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .left{
                height: 100%;
                transition: .5s;
                z-index: 9999;
            }
            .right{
                flex: 1;
                transition: .5s;
                height: 100%;
                background-color: rgb(255, 255, 255);
                .pages{
                    height: 97%;
                    width: 99%;
                    background-color: #ffffff;
                    margin: 0.5% 0.3%;
                    border-radius: 1rem;
                }
                .pagefooter{
                    height: 3%;
                    width: 100%;
                    border-top: 1px solid ;
                    background-color: #ffffff;
                    text-align: center;
                }
            }
        }
        
    }
}
</style>